import React from 'react';

import '../../assets/css/style.css';
import "@arcgis/core/assets/esri/themes/dark/main.css";
import Map from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
import TileLayer from '@arcgis/core/layers/TileLayer';
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';

import LabelPoint from './js/labelPoint';
import texture1 from './img/tex_1.png';
import texture2 from './img/billboard.png';
const THREE = window.THREE = require('three');
class LabelPointApp extends React.Component {

    constructor(props) {
        super(props);
        this.opts = {
        }
    }
    componentDidMount() {
        document.getElementsByTagName('title')[0].innerText = 'labelPoint-特殊标记点';
        const baselayer = new TileLayer({
            url: window.geosample.basemapLH,
        });
        let map = new Map({
        })
        map.add(baselayer);
        let view = new SceneView({
            map: map,
            container: 'viewDiv',
            viewingMode: "local"
        });
        view.when(function () {
            view.goTo({
                fov: 55,
                heading: 358.83617947864354,
                position: {
                    x: 13522335.449138768,
                    y: 3508779.5737503027,
                    z: 107686.45338745633,
                    spatialReference: {
                        wkid: 102100
                    }
                },
                tilt: 51.78744026248896
            });
        })
        let render = new LabelPoint({
            view,
            externalRenderers,
            points: [
                [13529536.50333642, 3626588.0048437016, 1000,1],//1-三角锥标注，2-精灵图标标注
                [13493621.2254855, 3647407.029471413, 1000,1],
                [13517475.44380141, 3652703.85109271, 1000,2]
            ],
            color_pyr:'#5588aa',
            width_pyr: 1000,
            height_pyr: 1500,
            texture_pyr:texture1,
            size_spr:[6000,3000,6000],
            texture_spr:texture2
            
        })
        externalRenderers.add(view, render);
        window.view = view;
    }
    render() {
        return (
            <div id="viewDiv">
            </div>
        )
    }
}

export default LabelPointApp;